{% comment %}
Copyright 2012 Google Inc.  All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License"); you may not
use this file except in compliance with the License.  You may obtain a copy
of the License at: http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distrib-
uted under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES
OR CONDITIONS OF ANY KIND, either express or implied.  See the License for
specific language governing permissions and limitations under the License.
{% endcomment %}
<!DOCTYPE html> {# activates Strict mode in most browsers including IE8 #}
<head>
  <title>{{title}}</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta itemprop="image" content="{{root}}/.static/favicon.ico">
  <meta name="viewport" content="maximum-scale=1.0,initial-scale=1.0,user-scalable=no">
  <link rel="stylesheet" href="{{root}}/.static/card.css">
  <script>
    // Crisis landing page analytics
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-8630973-1']);
    _gaq.push(['_trackPageview']);

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
  </script>
</head>
<body>
  <div id="card" class="card">
    <div id="location-menu" class="location-menu">
    </div>
    {% if features and not place %}
      <div class="unit-menu">
        {% if unit == 'mi' %}
          <a href="{{url_no_unit}}&unit=km">km</a> &#xb7; mi
        {% else %}
          km &#xb7; <a href="{{url_no_unit}}&unit=mi">mi</a>
        {% endif %}
     </div>
    {% endif %}
    <div>
      <div class="title">{{title}}</div>
      <div class="subtitle" id="card-subtitle">
        <div class="location-name" id="location-name"></div>
        <div class="location-disclosure"></div>
      </div>
    </div>
    <div id="list">
      {% if not features %}
        <div class="item">
          No results found{% if not place %} near you{% endif %}.
        </div>
      {% endif %}
      {% for feature in features %}
        {% if feature.properties.name %}
          <div class="item">
            {% if feature.properties.distance != None and not place %}
              <div class="directions">
                  <a target="_blank" id="{{feature.properties.layer_id}}-{{feature.geometry.coordinates.1}}-{{feature.geometry.coordinates.0}}" class="directions-link" href="http://maps.google.com/maps?daddr={{feature.geometry.coordinates.1}},{{feature.geometry.coordinates.0}}">
                  <span class="icon"></span>
                  <div class="distance">
                    {% if unit == 'mi' %}
                      {{feature.properties.distance_mi|floatformat:1}} mi
                    {% else %}
                      {{feature.properties.distance_km|floatformat:1}} km
                    {% endif %}
                  </div>
                </a>
              </div>
            {% endif %}
            <div class="title">
              <a target="_blank" id="{{feature.properties.layer_id}}-{{feature.geometry.coordinates.1}}-{{feature.geometry.coordinates.0}}" class="place-link" href="http://maps.google.com/maps?q={{feature.properties.name}}%20near%20{{feature.geometry.coordinates.1}},{{feature.geometry.coordinates.0}}">
                  {{feature.properties.name}}</a>
            </div>
            {% if show_descriptions and feature.properties.description_html %}
              <div class="description">
                {{feature.properties.description_html|safe}}
              </div>
            {% endif %}
            <div class="clear"></div>
            {% if feature.properties.answer_text %}
              <div class="crowd" style="border-left-color: {{feature.properties.status_color}}">
                <div class="answers">"{{feature.properties.answer_text}}"</div>
                <div class="metadata">
                  <span class="time">{{feature.properties.answer_time}}</span>
                  {% if feature.properties.answer_source %}
                    <span class="source"> · {{feature.properties.answer_source}}</span>
                  {% endif %}
                </div>
              </div>
            {% endif %}
          </div>
        {% endif %}
      {% endfor %}
      {% if footer_html %}
        <div class="footer">{{footer_html|safe}}</div>
      {% endif %}
    </div>
  </div>
</body>
<script src="{{root}}/.static/card.js"></script>
<script>
  var config = {{config_json|safe}};
  var places = {{places_json|safe}};
  var place = config.place;

  addListener(window, 'resize', updateSize);
  updateSize();
  addListener(window, 'message', function(event) {
    if (event.data.type === 'location_unavailable') {
      // TODO(romano): may also want to pass in event.data.site and
      // event.data.error to further customize the UI. 
     updateLocationMenu(places, place && place.id, config.url_no_loc, true);
    }
    if (event.data.type === 'document_click') {
      documentClickHandler();
    }
  });
  updateLocationMenu(places, place && place.id, config.url_no_loc,
                     config.location_unavailable);
  updateLocationName(place && place.name || null);

  var subtitle = $("card-subtitle")
  subtitle && addListener(subtitle, 'click', showLocationMenu);
  addListener(window, 'click', hideLocationMenu);

  // Set custom variables for all events.
  window._gaq.push(['_setCustomVar', 2, 'Map ID', config.map_id]);
  window._gaq.push(['_setCustomVar', 5, 'Topic ID',
                    config.map_id + '.' + config.topic_id]);
  window._gaq.push(['_setCustomVar', 21, 'Map label', config.map_label]);
  window._gaq.push(['_setCustomVar', 22, 'Topic title', config.topic_title]);
  addClickEventTrackingToLinks(config.map_id);
</script>
